@use "../../default" as *;
@use "../../common/var.scss" as *;
@use "sass:map";
.doc-container {
  width: 900px;
  padding: 20px;
  .demo{
    padding: 20px;
    border-radius: 20px 20px 0 0;
    box-shadow: map.get($box-shadow,"base");
    >p{
      line-height: 30px;
        margin-bottom: 20px;
    }
  }
  section {
    margin: 20px 0 120px;
      .code {
        width: fit-content;
        height: fit-content;
        > pre {
          color: #0e885f;
          border-radius: 0 0 20px 20px;
          width: 860px;
          padding: 20px;
          background-color: #ebe6e6;
          overflow-x: auto;
        }
      }
      .row-container {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      >p {
        line-height: 30px;
        margin-bottom: 20px;
        > span {
          padding: 3px;
          border-radius: 4px;
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
        }
      }
  }
  mark {
    padding: 0 5px;
    background-color: #52e4a1;
    border-radius: 5px;
  }
  h2 {
    margin-bottom: 10px;
  }
  a {
    color: #0e885f;
    text-decoration: none;
    &:active {
      color: #0a6647;
    }
  }
  .property-table {
    tr {
      border: 1px solid black;
    }
  }
  .md {
    margin: 20px 0;
  }
  .component {
    margin: 10px 0;
  }
}
